<template>
	<view class="page">
		<view class="page-header">
			<view class="search-bar">
				<view class="city-picker" @click="showCityPicker=true">
					{{searchCity||'全部'}}
					<u-icon name="arrow-down-fill" size="12rpx" color="#999999"></u-icon>
				</view>
				<view class="line"></view>
				<view class="search-input">
					<u-icon name="search" size="36rpx"></u-icon>
					<input placeholder="请输入小区名称进行搜索" v-model="searchValue"/>
				</view>
				<view class="search-btn" @click="reloadList">搜索</view>
			</view>
		</view>
		
		<view class="empty-tips" v-if="!list.length">
			<image src="../../static/roomInfo/empty.png" mode="widthFix"></image>
			没有该小区房屋信息
		</view>
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id" @click="toDetail(item)">
				<view class="room-img"><image :src="imgPath+item.gdfCode+'/1.png?'+xOssProcess" mode="aspectFill"></image></view>
				<view class="room-info">
					<view class="room-name">{{item.gdfXmName}}</view>
					<view class="room-tag">
						<text v-if="item.gdfFwxz!='车位'">{{item.gdfFwxz}}</text>
						<text>{{item.gdfFwhx}}</text>
						<text v-if="item.gdfFwxz!='车位'">建面{{item.gdfJzmj}}㎡</text>
					</view>
					<view class="room-price" v-if="item.gdfFwxz!='车位'">
						{{item.gdfQkdj}}元/平
						<text>内购单价</text>
					</view>
					<view class="room-price" v-if="item.gdfFwxz=='车位'">
						{{(item.gdfQkzj/10000).toFixed(1)}}万元
						<text>内购价格</text>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="showCityPicker" :list="cityOptions" @confirm="handleSetCity"></u-select>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { getGdfList, getGdfCity } from "../../common/api/gdf.js";
	export default{
		data(){
			return {				
				imgPath:'https://pi.4006002222.com/hifimage/gdfinfo/',
				xOssProcess:'x-oss-process=image/resize,p_50',
				showCityPicker:false,
				cityOptions:[{label:'全部', value:''}],
				list:[],
				searchValue:'',
				searchCity:'',
				pageNum:1,
				pageSize:10,
				hasMore:true
			}
		},
		onLoad() {
			let that = this
			this.LOGINACTION()
			this.INITWXJSDK(this.CONFIG.appid, location.origin + location.pathname + location.search, ()=>{
				that.$wx.hideOptionMenu();
			},['hideOptionMenu'])
			this.LOGINACTION()
			this.getCityOptions()
			this.getGdfList()
		},
		onReachBottom() {
			this.getGdfList()
		},
		methods:{
			getCityOptions(){
				getGdfCity({},res=>{
					if(res.data.code==200){
						for(let i of res.data.data){
							this.cityOptions.push({label:i, value:i})
						}
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			getGdfList(){
				if(!this.hasMore){
					return
				}
				uni.showLoading({
					title:'加载中...'
				})
				getGdfList({
					gdfCity:this.searchCity, 
					gdfXmName:this.searchValue,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					gdfIsShow:'1',
					gdfSfys:'0'
				}, res=>{
					uni.hideLoading()
					if(res.data.code==200){
						this.list = this.list.concat(res.data.rows)
						if(this.pageSize>res.data.rows){
							this.hasMore = false
						}else{
							this.hasMore = true
							this.pageNum = this.pageNum+1
						}
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			reloadList(){
				this.pageNum = 1
				this.list = []
				this.getGdfList()
			},
			handleSetCity(e){
				this.searchCity = e[0].value
				this.reloadList()
			},
			toDetail(item){
				uni.navigateTo({
					url:'detail?id='+item.id
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		padding-top: 90rpx;
	}
	.page-header{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #3875C6;
		padding: 10rpx 30rpx;
		z-index: 2;
	}
	.search-bar{
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		border-radius: 90rpx;
	}
	.search-bar .line{
		width: 1px;
		height: 34rpx;
		background: #E5E5E5;
	}
	.city-picker{
		display: flex;
		align-items: center;
		line-height: 70rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		padding:0 16rpx 0 30rpx;
	}
	.city-picker .u-icon{
		margin-left: 30rpx;
	}
	.search-input{
		display: flex;
		align-items: center;
		padding: 0 0 0 16rpx;
		flex: 1;
		height: 70rpx;
	}
	.search-input .u-icon{
		margin-right: 15rpx;
		flex: 0 0 auto;
	}
	.search-input input{
		height: 100%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		flex: 1;
	}
	.search-btn{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3875C6;
		line-height: 70rpx;
		padding: 0 30rpx;
	}
	.item{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #EDEDED;
	}
	.room-img{
		margin-right: 30rpx;
		flex: 0 0 auto;
		width: 250rpx;
		height: 166rpx;
		border-radius: 6rpx;
		background-color: #2C405A;
	}
	.room-img image{
		width: 250rpx;
		height: 166rpx;
		border-radius: 6rpx;
		vertical-align: top;
	}
	.room-info{
		flex: 1;
	}
	.room-name{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.room-tag{
		margin: 12rpx 0 22rpx 0;
	}
	.room-tag text{
		padding: 0 8rpx;
		line-height: 30rpx;
		background: #F1F3FF;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #386BED;
		margin-right: 9rpx;
		display: inline-block;
	}
	.room-price{
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #ED3C38;
	}
	.room-price text{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #888888;
		margin-left: 15rpx;
	}
	
	.empty-tips{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
		margin-top: 300rpx;
	}
	.empty-tips image{
		width: 360rpx;
		height: auto;
		vertical-align: top;
		margin: 0 auto 100rpx auto;
		display: block;
	}
</style>
